<template>
  <view class="comment">
    <view v-for="(i, k) in dataList" :key="k" class="comment-item">
      <view class="comment-row">
        <view class="comment-row-left">
          <view class="ss-flex ss-flex-1">
            <view class="operator">{{ i.createUserNickName }}</view>
            <view class="post-tag">{{ enumUserType(i.createUserType) }}</view>
          </view>
          <uv-text :text="i.content" color="#757575" size="24rpx" margin="20rpx 0" />
          <uv-text :text="i.createTime" color="#757575" size="24rpx" />
        </view>
        <uv-avatar :src="webSrc(i.createUserAvatar)" size="106rpx" />
      </view>
    </view>
    <uv-load-more v-if="dataList.length != 0" :status="status" />
    <uv-empty v-else margin-top="6vh" :icon="empty" text="暂无评论" />
    <view class="comment-footer" :style="{ bottom: keyboardHeight + 'px' }">
      <uv-input
        v-model="content"
        auto-blur
        border="none"
        placeholder="请输入内容"
        @confirm="handleSend"
      >
        <template v-slot:suffix>
          <uv-button text="发送" type="success" size="mini" @click="handleSend" />
        </template>
      </uv-input>
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { addComment, commentList } from "@/request/order.js";
import { webSrc, enumUserType } from "@/common/mothed.js";
import empty from "@/static/empty.png";

const props = defineProps({
  orderId: {
    type: Number,
    default: null,
  },
  // 是否触底加载
  onReach: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:onReach"]);

const dataList = ref([]); // 评论列表
const status = ref("loadmore"); // 加载状态
const total = ref(0); // 总条数
const content = ref(""); // 评论内容
const keyboardHeight = ref(0); // 键盘高度
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});

onMounted(() => {
  if (props.orderId) {
    emit("update:onReach", false);
    queryParams.value.pageNum = 1;
    getList();
  }
	// #ifdef APP-PLUS
  // 监听键盘的弹出事件
  uni.onKeyboardHeightChange((res) => {
    if (res.isKeyboardShow) {
      keyboardHeight.value = res.height;
    } else {
      keyboardHeight.value = 0;
    }
  });
	// #endif
});

watch(
  props,
  (v) => {
    if (v.onReach) {
      if (total.value > dataList.value.length) {
      queryParams.value.pageNum += 1;
      getList();
      } else {
				emit("update:onReach", false);
			}
    }
  },
  { immediate: true, deep: true }
);

// 获取评论列表
const getList = () => {
  status.value = "loading";
  commentList(props.orderId, queryParams.value)
    .then((res) => {
      if (res.code == 200) {
        dataList.value =
          queryParams.value.pageNum == 1 ? res.rows : dataList.value.concat(res.rows);
        total.value = res.total;
      }
    })
    .finally(() => {
      status.value = dataList.value.length < total.value ? "loadmore" : "nomore";
      if (props.onReach) emit("update:onReach", false);
    });
};

// 发送评论
const handleSend = () => {
  if (!content.value) {
    uni.showToast({
      title: "请输入评论内容",
      icon: "none",
    });
    return;
  }
  addComment({
    content: content.value,
    maintenanceWorkOrderId: props.orderId,
  }).then((res) => {
    if (res.code == 200) {
      uni.showToast({
        title: "评论成功",
        icon: "success",
      });
      queryParams.value.pageNum = 1;
      queryParams.value.pageSize = total.value + 1;
      content.value = "";
      getList();
    }
  });
};
</script>
<style lang="scss" scoped>
.comment {
  padding: 20rpx;

  .comment-item {
    border-radius: 20rpx;
    border: 2rpx solid #dedede;
    margin-bottom: 20rpx;
    padding: 30rpx;

    &:active {
      background-color: #f1f1f1;
      border: 2rpx solid #f1f1f1;
    }

    &:last-child {
      margin-bottom: 0;
    }

    .comment-row {
      display: flex;
      justify-content: space-between;

      &-left {
        max-width: 460rpx;
        flex: 1;

        .operator {
          font-size: 36rpx;
          color: #212121;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .post-tag {
          min-width: 220rpx;
          font-size: 24rpx;
          color: #757575;
          margin-left: 30rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .comment-footer {
    position: fixed;
    left: 0;
    right: 0;
    border-top: 2rpx solid #e5e5e5;
    height: 80rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    background-color: #fff;
  }
}
</style>
